@import "Reset.css";

/* # General styles
================================================== */

html {
height: 100%;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: url(../Images/Backgrounds/body.jpg);
font-size: 12px;
line-height: 22px;
color: #5f5f5f;
min-height: 100%;
position: relative;
}

#page {
padding-top: 55px;
}

#content {
padding-bottom: 60px;
position: relative;
margin-left: 327px;
padding-top: 49px;
}

.wrapper {
margin: 0 30px;
}

.clear {
clear: both;
display: block;
}

.mfix {
margin: 0 2px!important;
}

.hidden {
overflow: hidden;
}

.relative {
position: relative;
}

a {
cursor: pointer;
}

p {
padding-top: 12px;
}

img {
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

.inactive {
color: #2B6893!important;
}


.noBorderB {
border-bottom: none!important;
}

.nobg {
background: none!important;
}

.nomargin {
margin: 0!important;
}

.nopadding {
padding: 0!important;
}

.displayNone {
display: none;
}

.display {
display: block!important;
}

.fullwidth {
width: 100%;
}

.thisRow {
background: #f3f3e8!important;
}

.hand {
cursor: pointer;
}

.floatL {
display: block;
float: left;
}

.floatR {
display: block;
float: right;
}

.legendLabel span {
display: block;
margin: 0 5px;
}

.legendColorBox {
padding-left: 10px;
}

button, input[type=submit], input[type=image], input[type=reset] {
cursor: pointer;
}

.with {
width: 326px;
}

.without {
width: 100px;
}

.tooltip {
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
color: #fff;
font-size: 11px;
padding: 3px 8px;
background: #3b3b3b;
background: -moz-linear-gradient(top, #3b3b3b 0%, #1d1d1d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b3b3b), color-stop(100%,#1d1d1d));
background: -webkit-linear-gradient(top, #3b3b3b 0%,#1d1d1d 100%);
background: -o-linear-gradient(top, #3b3b3b 0%,#1d1d1d 100%);
background: -ms-linear-gradient(top, #3b3b3b 0%,#1d1d1d 100%);
background: linear-gradient(top, #3b3b3b 0%,#1d1d1d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#1d1d1d',GradientType=0 );
}



/* # Typography
================================================== */

/* === Headings === */

h1 {
font-size: 24px;
}

h2 {
font-size: 22px;
}

h3 {
font-size: 20px;
}

h4 {
font-size: 18px;
}

h5 {
font-size: 16px;
}

h6 {
font-size: 14px;
}


/* === Text colors === */

.red {
color: #A64949;
}

.green {
color: #4D7F12;
}

.grey {
color: #aaa;
}


/* === Placeholder color === */

::-webkit-input-placeholder {
color: #b3b3b3;
}

:-moz-placeholder {
color: #b3b3b3;
}


/* === Text alignment === */

.textL {
text-align: left!important;
}

.textC {
text-align: center;
}

.textR {
text-align: right;
}


/* === Label styles === */

.redBack, .greenBack, .greyBack, .blueBack {
padding: 5px 6px 4px 6px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
color: #fafafa;
}

.redBack {
background: #b75d5d;
}

.greenBack {
background: #7ab75d;
}

.greyBack {
background: #6a6a6a;
}

.blueBack {
background: #5d92b7;
}


/* === Buttons === */

.buttonS, .buttonM, .buttonL, .buttonH, [class*="tablectrl"] {
font-size: 11px;
color: #fff;
font-weight: bold;
text-shadow: 0 -1px #6f6f6f;
display: inline-block;
line-height: 14px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

.buttonS span, .buttonM span, .buttonL span, .buttonH span {
text-shadow: 0 1px 0 #6f6f6f;
margin-left: 10px;
}

.buttonS {
padding: 6px 14px;
}

.buttonM {
padding: 7px 15px;
}

.buttonL {
padding: 8px 18px;
}

.buttonH {
float: right;
padding: 4px 12px 4px 12px;
color: #fff!important;
margin: 7px 10px 6px 10px;
}

.bGreen:hover, .bRed:hover, .bBlue:hover, .bGreyish:hover, .bBlack:hover, .bLightBlue:hover, .bGold:hover, .bSea:hover, .bBrown:hover {
opacity: 0.95;
filter: alpha(opacity=95);
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}

.bDefault, .dualBtn, .searchLine button {
border: 1px solid #c3c3c3;
box-shadow: inset 0 1px 2px #fff;
-webkit-box-shadow: inset 0 1px 2px #fff;
-moz-box-shadow: inset 0 1px 2px #fff;
color: #686868;
text-shadow: none;
background: #f8f8f8;
background: -moz-linear-gradient(top, #f8f8f8 0%, #e8e8e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#e8e8e8));
background: -webkit-linear-gradient(top, #f8f8f8 0%,#e8e8e8 100%);
background: -o-linear-gradient(top, #f8f8f8 0%,#e8e8e8 100%);
background: -ms-linear-gradient(top, #f8f8f8 0%,#e8e8e8 100%);
background: linear-gradient(top, #f8f8f8 0%,#e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#e8e8e8',GradientType=0 );
}

.bDefault:hover, .dualBtn:hover, .searchLine button:hover {
-webkit-transition: box-shadow 0.05s ease-in-out;
-moz-transition: box-shadow 0.05s ease-in-out;
transition: box-shadow 0.05s ease-in-out;
background: #fafafa;
background: -moz-linear-gradient(top, #fafafa 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top, #fafafa 0%,#e5e5e5 100%);
background: -o-linear-gradient(top, #fafafa 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top, #fafafa 0%,#e5e5e5 100%);
background: linear-gradient(top, #fafafa 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e5e5e5',GradientType=0 );
}

.bDefault:active, .dualBtn:active, .titleToolbar > li > a:active, .titleOpt > a:active, .searchLine button:active {
background: #eee;
color: #505050;
border-color: #c0c0c0;
box-shadow: 0 0 5px #e2e2e2 inset, 0 1px 1px #fff;
-webkit-box-shadow: 0 0 5px #e2e2e2 inset, 0 1px 1px #fff;
-moz-box-shadow: 0 0 5px #e2e2e2 inset, 0 1px 1px #fff;
text-shadow: 0 -1px 1px #f1f1f1;
}

.bDefault span {
text-shadow: none;
}

.bGreen {
border: 1px solid #68a341;
box-shadow: 0 1px 2px 0 #a4ca6c inset;
-webkit-box-shadow: 0 1px 2px 0 #a4ca6c inset;
-moz-box-shadow: 0 1px 2px 0 #a4ca6c inset;
background: #96c161;
background: -moz-linear-gradient(top, #96c161 0%, #609c3d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96c161), color-stop(100%,#609c3d));
background: -webkit-linear-gradient(top, #96c161 0%,#609c3d 100%);
background: -o-linear-gradient(top, #96c161 0%,#609c3d 100%);
background: -ms-linear-gradient(top, #96c161 0%,#609c3d 100%);
background: linear-gradient(top, #96c161 0%,#609c3d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96c161', endColorstr='#609c3d',GradientType=0 );
}

.bGreen:active {
background: #74aa49;
box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
}

.bRed {
border: 1px solid #a95151;
box-shadow: 0 1px 2px 0 #cd8787 inset;
-webkit-box-shadow: 0 1px 2px 0 #cd8787 inset;
-moz-box-shadow: 0 1px 2px 0 #cd8787 inset;
background: #c57979;
background: -moz-linear-gradient(top, #c57979 0%, #a34c4c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c57979), color-stop(100%,#a34c4c));
background: -webkit-linear-gradient(top, #c57979 0%,#a34c4c 100%);
background: -o-linear-gradient(top, #c57979 0%,#a34c4c 100%);
background: -ms-linear-gradient(top, #c57979 0%,#a34c4c 100%);
background: linear-gradient(top, #c57979 0%,#a34c4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c57979', endColorstr='#a34c4c',GradientType=0 );
}

.bRed:hover {
opacity: 0.95;
filter: alpha(opacity=95);
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}

.bRed:active {
background: #b15e5e;
box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
}

.bBlue {
border: 1px solid #3e76af;
box-shadow: 0 1px 2px 0 #66b2d2 inset;
-webkit-box-shadow: 0 1px 2px 0 #66b2d2 inset;
-moz-box-shadow: 0 1px 2px 0 #66b2d2 inset;
background: #5ba5cb;
background: -moz-linear-gradient(top, #5ba5cb 0%, #3a70ab 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba5cb), color-stop(100%,#3a70ab));
background: -webkit-linear-gradient(top, #5ba5cb 0%,#3a70ab 100%);
background: -o-linear-gradient(top, #5ba5cb 0%,#3a70ab 100%);
background: -ms-linear-gradient(top, #5ba5cb 0%,#3a70ab 100%);
background: linear-gradient(top, #5ba5cb 0%,#3a70ab 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ba5cb', endColorstr='#3a70ab',GradientType=0 );
}

.bBlue:hover {
opacity: 0.95;
filter: alpha(opacity=95);
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}

.bBlue:active {
background: #4786b8;
box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
}

.bGreyish {
border: 1px solid #5e6779;
box-shadow: 0 1px 2px 0 #9ca6b3 inset;
-webkit-box-shadow: 0 1px 2px 0 #9ca6b3 inset;
-moz-box-shadow: 0 1px 2px 0 #9ca6b3 inset;
background: #8c97a6;
background: -moz-linear-gradient(top, #8c97a6 0%, #596171 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c97a6), color-stop(100%,#596171));
background: -webkit-linear-gradient(top, #8c97a6 0%,#596171 100%);
background: -o-linear-gradient(top, #8c97a6 0%,#596171 100%);
background: -ms-linear-gradient(top, #8c97a6 0%,#596171 100%);
background: linear-gradient(top, #8c97a6 0%,#596171 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c97a6', endColorstr='#596171',GradientType=0 );
}

.bGreyish:active {
background: #6d7787;
box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
}

.bBlack {
border: 1px solid #4e4e4e;
box-shadow: 0 1px 2px 0 #959595 inset;
-webkit-box-shadow: 0 1px 2px 0 #959595 inset;
-moz-box-shadow: 0 1px 2px 0 #959595 inset;
background: #838383;
background: -moz-linear-gradient(top, #838383 0%, #444444 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#838383), color-stop(100%,#444444));
background: -webkit-linear-gradient(top, #838383 0%,#444444 100%);
background: -o-linear-gradient(top, #838383 0%,#444444 100%);
background: -ms-linear-gradient(top, #838383 0%,#444444 100%);
background: linear-gradient(top, #838383 0%,#444444 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#838383', endColorstr='#444444',GradientType=0 );
}

.bBlack:active {
background: #5d5d5d;
box-shadow: 0 0 2px #505050 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 0 2px #505050 inset, 0 1px 0 #fff;
-moz-box-shadow: 0 0 2px #505050 inset, 0 1px 0 #fff;
}

.bLightBlue {
border: 1px solid #5897c3;
box-shadow: 0 1px 2px 0 #84c4dd inset;
-webkit-box-shadow: 0 1px 2px 0 #84c4dd inset;
-moz-box-shadow: 0 1px 2px 0 #84c4dd inset;
background: #6db5d5;
background: -moz-linear-gradient(top, #6db5d5 0%, #4a91c0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db5d5), color-stop(100%,#4a91c0));
background: -webkit-linear-gradient(top, #6db5d5 0%,#4a91c0 100%);
background: -o-linear-gradient(top, #6db5d5 0%,#4a91c0 100%);
background: -ms-linear-gradient(top, #6db5d5 0%,#4a91c0 100%);
background: linear-gradient(top, #6db5d5 0%,#4a91c0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db5d5', endColorstr='#4a91c0',GradientType=0 );
}

.bLightBlue:active {
background: #559cc7;
box-shadow: 0 0 2px #808080 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 0 2px #808080 inset, 0 1px 0 #fff;
-moz-box-shadow: 0 0 2px #808080 inset, 0 1px 0 #fff;
}

.bGold {
border: 1px solid #c4853e;
box-shadow: 0 1px 2px 0 #ddb65b inset;
-webkit-box-shadow: 0 1px 2px 0 #ddb65b inset;
-moz-box-shadow: 0 1px 2px 0 #ddb65b inset;
background: #d5a44c;
background: -moz-linear-gradient(top, #d5a44c 0%, #c07833 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5a44c), color-stop(100%,#c07833));
background: -webkit-linear-gradient(top, #d5a44c 0%,#c07833 100%);
background: -o-linear-gradient(top, #d5a44c 0%,#c07833 100%);
background: -ms-linear-gradient(top, #d5a44c 0%,#c07833 100%);
background: linear-gradient(top, #d5a44c 0%,#c07833 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5a44c', endColorstr='#c07833',GradientType=0 );
}

.bGold:active {
background: #ca8e40;
box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
}

.bSea {
border: 1px solid #5a837e;
box-shadow: 0 1px 2px 0 #95b8b6 inset;
-webkit-box-shadow: 0 1px 2px 0 #95b8b6 inset;
-moz-box-shadow: 0 1px 2px 0 #95b8b6 inset;
background: #7ca6a3;
background: -moz-linear-gradient(top, #7ca6a3 0%, #547b76 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7ca6a3), color-stop(100%,#547b76));
background: -webkit-linear-gradient(top, #7ca6a3 0%,#547b76 100%);
background: -o-linear-gradient(top, #7ca6a3 0%,#547b76 100%);
background: -ms-linear-gradient(top, #7ca6a3 0%,#547b76 100%);
background: linear-gradient(top, #7ca6a3 0%,#547b76 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ca6a3', endColorstr='#547b76',GradientType=0 );
}

.bSea:active {
background: #68918d;
box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
}

.bBrown {
border: 1px solid #9c6b3c;
box-shadow: 0 1px 2px 0 #c8a85f inset;
-webkit-box-shadow: 0 1px 2px 0 #c8a85f inset;
-moz-box-shadow: 0 1px 2px 0 #c8a85f inset;
background: #bb934f;
background: -moz-linear-gradient(top, #bb934f 0%, #996336 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bb934f), color-stop(100%,#996336));
background: -webkit-linear-gradient(top, #bb934f 0%,#996336 100%);
background: -o-linear-gradient(top, #bb934f 0%,#996336 100%);
background: -ms-linear-gradient(top, #bb934f 0%,#996336 100%);
background: linear-gradient(top, #bb934f 0%,#996336 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb934f', endColorstr='#996336',GradientType=0 );
}

.bBrown:active {
background: #ad7f45;
box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
-moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
}



/* # Login page
================================================== */

.loginWrapper {
width: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -130px 0 0 -120px;
text-align: center;
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
}

/* === Login hover buttons === */

.logleft, .logright, .logback {
background: url(../Images/loginControl.png) no-repeat;
height: 37px;
width: 37px;
position: absolute;
top: 36px;
display: block;
opacity: 0;
filter: alpha(opacity=0);
}

.logleft {
left: 0px;
background-position: 0 0;
}

.logright {
right: 0px;
background-position: -38px 0;
}

.logback {
left: 0;
background-position: -76px 0;
}

.logleft:hover {
background-position: 0 -39px;
}

.logright:hover {
background-position: -38px -39px;
}

.logback:hover {
background-position: -76px -39px;
}

#login {
z-index: 100;
}

#recover {
z-index: 1;
opacity: 0;
filter: alpha(opacity=0);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flipped #login {
opacity: 0;
filter: alpha(opacity=0);
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.loginWrapper.flipped #recover {
opacity: 1;
filter: alpha(opacity=100);
-moz-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}

.loginWrapper form {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/* Enabling 3d space for the transforms */
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/* Enabling a smooth animated transition */
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
transition: 0.8s;
/* Configure a keyframe animation for Firefox */
-moz-animation: pulse 2s infinite;
/* Configure it for Chrome and Safari */
-webkit-animation: pulse 2s infinite;
}

.loginPic {
text-align: center;
display: block;
position: relative;
overflow: hidden;
}

.loginPic span {
display: block;
color: #5f5f5f;
font-size: 14px;
margin-top: 10px;
font-weight: bold;
text-shadow: 0 1px 1px #ffffff;
}

.loginWrapper form {
display: block;
margin: 0 auto;
width: 236px;
}

.loginWrapper a {
display: inline-block;
}

.loginWrapper input[type=text], .loginWrapper input[type=password] {
font-size: 11px;
color: #858585;
box-shadow: 0 0 0px 2px #ebebeb;
-webkit-box-shadow: 0 0 0px 2px #ebebeb;
-moz-box-shadow: 0 0 0px 2px #ebebeb;
padding: 7px 27px 7px 9px;
border: 1px solid #d7d7d7;
width: 198px;
display: inline-block;
margin-top: 15px;
}

.loginUsername {
background: #fbfbfb url(../Images/Icons/loginUsername.png) no-repeat 213px 7px;
}

.loginPassword {
background: #fbfbfb url(../Images/Icons/loginLock.png) no-repeat 214px 7px;
}

.loginEmail {
background: #fbfbfb url(../Images/Icons/loginEmail.png) no-repeat 213px 7px;
}

.logControl {
margin-top: 15px;
}

.logControl .memory {
float: left;
margin-top: 5px;
}

.logControl input[type=submit] {
float: right;
}



/* # Error and offline pages
================================================== */

.errorWrapper {
position: absolute;
top: 50%;
bottom: 0;
margin-top: -190px;
text-align: center;
left: 0;
right: 0;
}

.errorContent {
width: 380px;
margin: auto;
margin-top: 35px;
}

.errorWrapper .errorTitle {
display: block;
text-shadow: 1px 0 0 #fff;
text-align: center;
font-size: 20px;
border-bottom: 1px solid #cdcdcd;
padding: 20px 14px;
font-weight: bold;
color: #d76a6a;
font-style: italic;
}

.errorWrapper .errorNum {
color: #fff;
font-size: 200px;
padding: 110px 0 80px 0;
display: block;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.errorDesc {
display: block;
margin: 20px 0 20px 0;
font-weight: bold;
font-size: 14px;
}

.errorContent .buttonM {
margin-top: 25px;
}
